<template>
  <div class="header-tabs" v-loading="isLoading">
    <ul class="left">
      <li
        v-for="[item, value] of typeList"
        :class="{ 'cat-item': true, 'active': value === target }"
        :key="item"
        @click="changeType(value)"
      >
        {{item}}
      </li>
    </ul>
    <div class="right">
      <button class="btn turn-red" @click='selectAll'><i class="iconfont iconbofang"/>播放全部</button>
      <button class="btn"><i class="iconfont iconshoucang1"/>收藏全部</button>
    </div>
  </div>
  <ul class="new-songs-content" v-if="newSongList.length">
    <li
      v-for="(song, index) of newSongList"
      :class="{
        'new-songs-item': true,
        'songActive': targetId === song.id
      }"
      @dblclick="selectSong(song.id)"
      :key="song"
    >
      <span v-if="targetId !== song.id" class="index">{{(index + 1).toString().padStart(2, '0')}}</span>
      <i v-if="song.id === targetId && playing" class="iconfont iconyangshengqispeaker85 index"/>
      <i v-if="song.id === targetId && !playing" class="iconfont iconyangshengqispeaker88 index"/>
      <div class="bofang">
        <img :src="song.picUrl" alt="#">
        <i class="iconfont icon65zanting"/>
      </div>
      <div class="song-tag">
        <p class="text" :title="song.name + song.aliasStr">
          <span class="song-name">{{song.name}}</span>
          <span class="alias">{{song.aliasStr}}</span>
        </p>
        <span v-if="song.exclusive" class="sq">SQ</span>
        <span v-if="song.mvid" class="mv" @click.stop="selectMv(song.mvid)">MV</span>
      </div>
      <div class="artists" :title="song.artists.map(item => item.name).join('/')">
        <p class="text">
          <template v-for="(artist, len) of song.artists" :key="artist">
            <span class="artist">{{artist.name}}</span>
            <span class="geli" v-if="len !== song.artists.length - 1">/</span>
          </template>
        </p>
      </div>
      <div class="album">
        <p class="text" @click.stop="selectAlbum(song.alId)">
          <span class="album-name">{{song.alName}}</span>
          <span class="album-alias">{{song.alAliasStr}}</span>
        </p>
      </div>
      <span class="duration">{{song.durationStr}}</span>
    </li>
  </ul>
</template>

<script lang="ts">
import { ref, watch, computed } from 'vue'
import { getTopSongs } from '@/api/new'
import { player } from '@/store/modules/player'
import { useRouter } from 'vue-router'

interface Artists {
  id: number;
  name: string;
}
interface NewSong {
  id: number;
  name: string;
  mvid: number;
  exclusive: boolean;
  durationStr: string;
  picUrl: string;
  alName: string;
  alId: number;
  alAliasStr: string;
  aliasStr: string;
  artists: Artists[];
  [params: string]: any;
}

export default {
  name: 'newSongExpress',
  setup () {
    const typeList = ref(new Map([['全部', 0], ['华语', 7], ['欧美', 96], ['日本', 8], ['韩国', 16]]))
    const target = ref<number>(0)
    const isLoading = ref<boolean>(false)
    const router = useRouter()
    const targetId = computed(() => player.currentSongLists[player.currentIndex])
    const playing = computed(() => player.playing)
    const newSongList = ref<NewSong[]>([])
    const changeType = (type) => {
      if (type !== target.value) {
        target.value = type
      }
    }
    const selectSong = (id) => {
      player.selectDanqu(id)
    }
    const selectAll = () => {
      const list = newSongList.value.map(item => item.id)
      const id = list[0]
      player.changeSonglist({ list, id })
    }
    const selectMv = (id) => {
      router.push({ name: 'video', params: { id } })
    }
    const selectAlbum = (id) => {
      router.push({ name: 'albumDetail', params: { id } })
    }
    watch(() => target.value, async () => {
      isLoading.value = true
      try {
        const data = await getTopSongs({ type: target.value })
        newSongList.value = data
      } catch (e) {
        isLoading.value = false
        console.log(e)
      }
      isLoading.value = false
    }, {
      immediate: true
    })
    return {
      typeList,
      target,
      newSongList,
      targetId,
      playing,
      isLoading,
      changeType,
      selectSong,
      selectAll,
      selectMv,
      selectAlbum
    }
  }
}
</script>

<style lang="scss" scoped>
.header-tabs {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  padding: 15px 20px 20px 0;

  .left {
    flex: 1;
    display: flex;
    align-items: center;

    .cat-item {
      margin-right: 30px;
      color: #666666;
      font-size: 14px;
      cursor: pointer;
    }

    .active {
      font-weight: bold;
      color: #2b2b2b;
    }
  }

  .right {
    .btn {
      border: 1px solid #d0d0d0;
      font-size: 13px;
      color: #2b2b2b;
      padding: 3px 10px;
      line-height: 18px;
      height: 26px;
      border-radius: 13px;
      outline: none;
      cursor: pointer;

      >i {
        margin-right: 2px;
      }

      &:hover {
        background-color: #d1d1d1;
      }
    }

    .turn-red {
      border: none;
      background-color: #ec4141;
      color: #f2f3f4;
      margin-right: 10px;

      &:hover {
        background-color: #cc3232;
      }
    }
  }
}

.new-songs-content {

  .new-songs-item:nth-of-type(odd) {
    background-color: #f8f8f8;
  }

  .new-songs-item:nth-of-type(even) {
    background-color: #f0f0f0;
  }

  .new-songs-item {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 70px;
    font-size: 14px;
    cursor: default;

    .index {
      flex: 0 0 50px;
      color: #d0d0d0;
      font-size: 12px;
      text-align: center;
    }

    .bofang {
      position: relative;
      border-radius: 5px;
      overflow: hidden;

      >img {
        width: 60px;
        height: 60px;
      }

      >i {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 22px;
        transform: translate(-50%, -50%);
        color: #f2f3f4;
        opacity: .8;
      }
    }

    .song-tag {
      flex: 0 0 350px;
      display: flex;
      flex-wrap: nowrap;

      .song-name {
        padding-left: 10px;
      }

      .alias {
        padding-left: 3px;
        color: #d0d0d0;
      }

      .sq, .mv {
        margin-left: 4px;
        padding: 1px;
        border: 2px solid #ec4141;
        color: #ec4141;
        font-weight: 500;
        border-radius: 3px;
      }

      .mv {
        cursor: pointer;
      }
    }

    .artists {
      flex: 1;
      color: #666666;

      .artist {
        cursor: pointer;

        &:hover{
          color: #2b2b2b;
        }
      }

      .geli {
        padding: 0 2px;
      }
    }

    .album {
      flex: 0 0 250px;
      color: #666666;
      cursor: pointer;

      .album-alias {
        color: #d0d0d0;
        padding-left: 3px;
      }

      &:hover {
        .album-name {
          color: #2b2b2b;
        }
      }
    }

    .duration {
      color: #929292;
      padding-right: 20px;
    }

    &:hover {
      background-color: #f0f0f0;
    }
  }

  .songActive {
    background-color: #cccccc !important;

    .index {
      color: #ec4141;
    }

    .song-tag {

      .song-name {
        color: #ec4141;
      }
    }
  }
}

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-height: 1.4;
}
</style>
